---
import BackToTop from "./components/BackToTop.astro";
import Toc from "./components/Toc.astro";
import TocList from "./components/Toc/TocList.astro";

type ComponentType = "BackToTop" | "Toc";

interface Props {
  class?: string;
  components?: ComponentType[];
}
const { class: className, components } = Astro.props;
---

<div class="corner" id="Corner" data-astro-class={className}>
  {
    components?.map((v) => (
      <div class="list_item">
        {(() => {
          switch (v) {
            case "BackToTop":
              return <BackToTop />;
            case "Toc":
              return <Toc />;
            default:
              break;
          }
        })()}
      </div>
    ))
  }
</div>
<div class="corner_menu_wrapper">
  {
    components?.map((v) => {
      switch (v) {
        case "Toc":
          return <TocList />;
        default:
          break;
      }
    })
  }
</div>

<script>
  const observerOptions: IntersectionObserverInit = {
    // Negative top margin accounts for `scroll-margin`.
    // Negative bottom margin means heading needs to be towards top of viewport to trigger intersection.
    rootMargin: "100px 0px 0px 0px",
  };

  const headingsObserver = new IntersectionObserver((e) => {
    let isShow = true;
    if (e[0].intersectionRatio <= 0.1) isShow = false;

    document.getElementById("Corner")?.setAttribute(
      "class",
      `corner
        ${document.getElementById("Corner")?.getAttribute("data-astro-class")}
        ${isShow ? "" : " show"}`
    );
  }, observerOptions);

  // Observe all the headings in the main page content.
  headingsObserver.observe(
    document.querySelector("#ScrollMark") || document.body
  );
</script>

<style lang="scss" is:global>
  #Corner {
    z-index: 5000;
    position: fixed;
    right: 1rem;
    bottom: 0.4rem;
    width: 2.2rem;
    transform: translateX(150%);
    transition: transform 0.3s;

    .list_item {
      width: 100%;
      height: 1.8rem;
      margin: 0.4rem 0;
      background-color: var(--background-default);
      border-radius: 0.2rem;
      box-shadow: 0 0 5px rgba(62, 62, 62, 0.5);
      transition: color 0.3s;
      cursor: pointer;

      &:hover {
        color: var(--tips-default);
      }
    }

    &.show {
      transform: translateX(0);
    }
  }
  .corner_menu_wrapper {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
  }
</style>
